<script setup lang="ts">
import type { DailyRecommendations, PageParams } from '@/types/home.d'
import { ref } from 'vue'
import { loadDailyRecommendationsUsingGet } from '@/services/home'
import { onLoad } from '@dcloudio/uni-app'

const dailyRecommendationList = ref<DailyRecommendations[]>([])
const finish = ref(false)
// 分页参数
const pageParams: Required<PageParams> = {
  pageNum: 1,
  pageSize: 5,
}

// 添加防抖变量
const isLoading = ref(false)

// 加载数据
const loadDailyRecommendationsData = async () => {
  if (finish.value === true) {
    return uni.showToast({ icon: 'none', title: '没有更多了' })
  }
  const res = await loadDailyRecommendationsUsingGet(pageParams)
  dailyRecommendationList.value.push(...res.data.data)
  // 分页条件
  if (pageParams.pageNum < res.data.total) {
    //页码累加
    pageParams.pageNum++
  } else {
    finish.value = true
  }
}

// 重置数据
const resetData = () => {
  pageParams.pageNum = 1
  dailyRecommendationList.value = []
  finish.value = false
}

// 触底加载更多
const onScrollToLower = async () => {
  if (isLoading.value) return
  isLoading.value = true

  try {
    await loadDailyRecommendationsData()
  } finally {
    isLoading.value = false
  }
}

// 自定义下拉刷新
const isTriggered = ref(false)
const onRefresherRefresh = async () => {
  // 开始动画
  isTriggered.value = true
  // 重置数据
  resetData()
  // 重新加载数据
  await loadDailyRecommendationsData()
  // 结束动画
  isTriggered.value = false
}

// 修改预览图片函数
const previewImage = (url: string) => {
  // 移除获取所有图片的逻辑，只预览当前图片
  uni.previewImage({
    current: url,
    urls: [url], // 只包含当前点击的图片
    indicator: 'number',
  })
}

// 分享功能
const handleShare = (item: DailyRecommendations) => {
  uni.showShareMenu({
    withShareTicket: true,
    menus: ['shareAppMessage', 'shareTimeline'],
    success: () => {
      uni.showToast({
        title: '分享成功',
        icon: 'none',
      })
    },
  })
}

// 初始加载
onLoad(() => {
  loadDailyRecommendationsData()
})
</script>

<template>
  <scroll-view
    refresher-enabled
    @refresherrefresh="onRefresherRefresh"
    :refresher-triggered="isTriggered"
    @scrolltolower="onScrollToLower"
    scroll-y
    class="scroll-view"
  >
    <view class="image-all">
      <view class="waterfall">
        <view v-for="item in dailyRecommendationList" :key="item.id" class="image-item">
          <view class="image-wrapper">
            <image
              :src="item.recommendationImg"
              mode="widthFix"
              class="image"
              @click="previewImage(item.recommendationImg!)"
            />
          </view>
          <view class="action-bar">
            <view class="action-icons">
              <view class="icon-wrapper" @click.stop="handleShare(item)">
                <uni-icons type="redo" size="27" color="#000000" />
              </view>
            </view>
          </view>
        </view>
      </view>

      <view class="loading-text" v-if="!finish"> 正在加载...</view>
    </view>
  </scroll-view>
</template>

<style lang="scss">
.scroll-view {
  height: 100vh;
  box-sizing: border-box;
}

.image-all {
  min-height: 100vh;
  background-color: #f8f8f8;
  padding-top: 12rpx;
  box-sizing: border-box;

  .waterfall {
    padding: 0 24rpx;
    box-sizing: border-box;

    .image-item {
      margin-bottom: 24rpx;
      background: #fff;
      border-radius: 12rpx;
      overflow: hidden;
      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

      .image-wrapper {
        position: relative;
        border-bottom: 2rpx solid #f5f5f5;
        width: 100%;
        font-size: 0; /* 消除图片底部间隙 */

        &::after {
          content: '';
          display: block;
          position: absolute;
          left: 0;
          right: 0;
          bottom: 0;
          height: 2rpx;
          background: linear-gradient(to right, transparent, #e8e8e8, transparent);
        }

        .image {
          width: 100%;
          height: auto;
          vertical-align: top; /* 改为top以消除底部间隙 */
          display: block;
          max-height: 1000rpx; /* 限制最大高度 */
          object-fit: cover;
        }
      }

      .action-bar {
        padding: 16rpx 24rpx;
        display: flex;
        justify-content: flex-end;
        background: #fff;
        box-sizing: border-box;

        .action-icons {
          display: flex;
          gap: 40rpx;
          align-items: center;

          .icon-wrapper {
            width: 70rpx;
            height: 70rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.6);
            transition: background-color 0.2s;
            margin-left: auto;
            flex-shrink: 0; /* 防止图标被压缩 */

            &:active {
              background-color: rgba(255, 255, 255, 0.8);
            }

            .uni-icons {
              width: 30rpx;
              height: 30rpx;
              font-weight: bold;
              color: #000000;
              flex-shrink: 0;
            }
          }
        }
      }
    }
  }
}

.loading-text {
  text-align: center;
  font-size: 28rpx; /* 改用rpx */
  color: #909399;
  padding: 30rpx 0;
  width: 100%;
  box-sizing: border-box;
}
</style>
